<template>
  <div class="businessMask">
    <div class="column">
      <div class="qrcode-wrapper">
        <div class="title-wrapper">
          <span class="title">android</span>扫码下载
        </div>
        <img src="@/assets/image/qrcode_bgc.png" alt="">
        <div class="qrcode" ref="qrCodeUrl" id="qrcode"></div>
      </div>
      <div class="qrcode-wrapper">
        <div class="title-wrapper">
          <span class="title">ios</span>扫码下载
        </div>
        <img src="@/assets/image/qrcode_bgc.png" alt="">
        <div class="qrcode" ref="qrCodeUrl" id="qrcode2"></div>
      </div>
    </div>
    <div class="column">
      <img class="close" src="@/assets/image/qrcode_close.png" alt="" @click.prevent.stop="closetag()">
      <div class="qrcode-wrapper">
        <div class="title-wrapper">
          <span class="title">android(测试)</span>扫码下载
        </div>
        <img src="@/assets/image/qrcode_bgc.png" alt="">
        <div class="qrcode" ref="qrCodeUrl" id="qrcode3"></div>
      </div>
      <div class="qrcode-wrapper">
        <div class="title-wrapper">
          <span class="title">ios(测试)</span>扫码下载
        </div>
        <img src="@/assets/image/qrcode_bgc.png" alt="">
        <div class="qrcode" ref="qrCodeUrl" id="qrcode4"></div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  data() {
    return {}
  },
  mounted() {
    this.qrcode()
  },
  methods: {
    qrcode() {
      let api = window.location.href.split('#')[0];
      let qrcode = new QRCode('qrcode', {
        width: 144,
        height: 144,
        text: api + '/download/app/11', // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
      let qrcode2 = new QRCode('qrcode2', {
        width: 144,
        height: 144,
        text: api + '/download/app/12', // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
      let qrcode3 = new QRCode('qrcode3', {
        width: 144,
        height: 144,
        text: api + '/download/app/21', // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
      let qrcode4 = new QRCode('qrcode4', {
        width: 144,
        height: 144,
        text: api + '/download/app/22', // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
    },
    closetag() {
      this.$emit('close', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.businessMask {
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .column {

    &:first-child {
      margin-right: 74px;
    }

    &:last-child {
      margin-left: 74px;
      position: relative;

      .close {
        position: absolute;
        right: -78px;
        top: -94px;
        cursor: pointer;
      }
    }

    .qrcode-wrapper {
      width: 252px;
      height: 300px;
      background: #FFFFFF;
      border-radius: 8px;
      position: relative;

      &:first-child {
        margin-bottom: 25px;
      }

      &:last-child {
        margin-top: 25px;
      }

      .title-wrapper {
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #E6E6E6;
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #333;

        .title {
          color: #406BEE;
        }
      }

      img {
        position: absolute;
        bottom: 0;
        left: 0;
      }

      .qrcode {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 46px;
      }
    }
  }
}
</style>
